<template>
  <div class="searchDetail">
     <div class="top">
        <div class="left">
            <img src="https://img.alicdn.com/imgextra/i2/O1CN01WaJ4lC1r9Lwk4Kpid_!!6000000005588-2-tps-72-72.png" alt="" @click="$router.push('/')">
            <span>|</span>
            <img src="https://img.alicdn.com/imgextra/i3/O1CN01fo0BDB1TFifsT62Mk_!!6000000002353-2-tps-72-72.png" alt="">
        </div>
        <div class="right">
            <p>
                <span>商品</span>
                <img src="//gw.alicdn.com/imgextra/i3/O1CN01ooPPCg25IsoRXoUfz_!!6000000007504-2-tps-28-16.png_.webp" alt="">
                <span>|</span>
            </p>
            <div class="search">
                <input type="text" :placeholder="searchTxt" v-model="searchTxt" @input="showList">
                <img src="//gw.alicdn.com/tfs/TB1hsorMeH2gK0jSZJnXXaT1FXa-48-48.png_.webp" alt="" v-if="flag" @click="hidden">
            </div>
            <span @click="goSearch">
                搜索
            </span>
        </div>
     </div>
     <!-- 搜索下拉 -->
     <div class="searchCommand" v-if="show">
        <div class="card" v-for="(v,index) in arrSearch" :key="index" @click="goDetail2(v)">
            <img src="//gw.alicdn.com/imgextra/i2/O1CN01BOlDaZ1zxI3l4HUSj_!!6000000006780-2-tps-56-56.png_.webp" alt="">
            <span>{{ v.proname.slice(0,7) }}</span>
        </div>
     </div>

     <div class="middle">
        <div>
            <p>综合</p>
            <img src="//gw.alicdn.com/imgextra/i2/O1CN01m1DxAp1yWtcRJAUnS_!!6000000006587-2-tps-26-14.png_.webp" alt="">
        </div>
        <div>销量</div>
        <div>
            <img src="//gw.alicdn.com/imgextra/i1/O1CN01lq3b421CYdZQguwxu_!!6000000000093-2-tps-54-52.png_.webp" alt="">
            <span>|</span>
            <p class="filter">
                <span>筛选</span>
                <img src="//gw.alicdn.com/imgextra/i1/O1CN01VRpSZQ1FOy3UO7BOw_!!6000000000478-2-tps-52-56.png_.webp" alt="">
            </p>
        </div>
     </div>
    <div class="isShow" v-if="flag">
      暂时没有相关产品哦
    </div>
    <!-- 渲染；list   -->
    <div class="list">
        <List v-for="(v, index) in arrList1" :key="index" :img1="v.img1" :proname="v.proname" :originprice="v.originprice"
            :sales="v.sales" @click.native="goDetail1(v)"></List>
    </div>
  </div>

</template>

<script>
import List from '../Goods/List.vue'
// 没有就请求推荐列表数据v，重新发请求获取，或者兄弟传值
export default {
    components: {
        List
    },
    data() {
        return {
            // 表单有数据就x显示
            flag: false,
            
            searchTxt:'香水',
            arrList1: [],
            show: false,
            arrSearch:[]
            
    }
    },
    methods: {
        //进入详情页 ,点击传入数组每一项对象,传的数据是对象需要转为字符串
        goDetail1(v) {
            this.$router.push({
                path: '/detail',
                query: {
                    delList: JSON.stringify(v)
                }
            })
        },
      async goSearch() {
            if (this.searchTxt) {
                const { data: res } = await this.$http.get('http://118.178.238.19:3001/api/pro/search', {
                    params: {
                        keyword: this.searchTxt
                    }
                })
                if (res.data) {
                    this.arrList1 = res.data
                } else {
                    this.flag = true
                }
            }
        },
        hidden() {
            this.searchTxt=''
        },
       async showList() {
            const { data: res } = await this.$http.get('http://118.178.238.19:3001/api/pro/search', {
                params: {
                    keyword: this.searchTxt
                }
            })
            if (res.data) {
                this.arrList1 = res.data
                this.arrSearch = res.data
                this.show = true
            } else {
                // 提示没有商品显示
                this.flag = true
                this.show = false 
            }
        },
        goDetail2(v) {
            this.$router.push({
                path: '/detail',
                query: {
                    delList: JSON.stringify(v)
                }
            })
        }
    },
 async  mounted() {
    //默认值 
        const { data: res } = await this.$http.get('http://118.178.238.19:3001/api/pro/search', {
            params: {
                keyword: this.searchTxt
            }
        })
     if (res.data) {
         this.arrList1 = res.data
     } else {
            this.flag=true
        }

      // 接收搜索数据
        if (this.$route.query.search) {
            this.arrList1 = JSON.parse(this.$route.query.search)
        } else {
            this.flag = true
     }
     if (this.$route.query.value) {
         this.searchTxt = this.$route.query.value
     }
    
}
}
</script>

<style lang="scss" scoped>
@mixin myStyle() {
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.searchDetail{
    background: #fff;
    font-size: .28rem;
    .top{
        position: relative;
        width: 7.1rem;
        height: .96rem;
        margin:auto;
       @include myStyle();
        .left{
            border-radius: .3rem;
            border: .02rem solid rgba(17, 17, 17, 0.50);
            width: 1.57rem;
            height: .56rem;
                @include myStyle();
            justify-content: space-around;
            img{
                width: .36rem;
                height: .36rem;
            }
        }
        .right{
            border-radius: .2rem;
            background: #F7F7F7;
            width: 5.4rem;
            height: .72rem;
            @include myStyle();
            justify-content: space-between;
            >p{
                padding-left: .04rem;
                width: 1.08rem;
                 @include myStyle();
                img{
                    width: .12rem;
                    height: .08rem;

                }
            }
            .search{
                @include myStyle();
                input{
                    width: 2.66rem;
                    height: .72rem;
                    background: #F7F7F7;
                    font-weight: bold;
                }
                img{
                    height: .32rem;
                    width: .32rem;
                }
            }
            >span{
                border-radius: .3rem;
                display: inline-block;
                width: 1.28rem;
                height: .56rem;
                line-height:.6rem;
                text-align: center;
                background-color: #ff5000;
                 background-image: linear-gradient(-15deg, #ff5000, #ff6900 61%, #ff963f);
                 color: #fff;
            }
        }
    }
}
// 真百度
    .searchCommand{
    width: 7.5rem;
    // height:18rem;
    position: absolute;
    top:.96rem;
    z-index:999;
    background: #fff;
    transition: all 1s linear;
    .card{
        // @include myStyle();
        width: 7.1rem;
        height: .9rem;
        margin: auto;
        line-height: .9rem;
        border-bottom:.02rem solid #f2f2f2;
         img{
            width: .28rem;
            height: .28rem;
            margin-right: .2rem;
            vertical-align: middle;
         }
    }
}
.middle{
    margin: auto;
    width:7.1rem;
    @include myStyle();
    font-size: .28rem;
    height: .8rem;
    div{
        @include myStyle();
    }
    >div:nth-child(1){
        color:#ff5000;
        img{
            width: .128rem;
            height: .068rem;
        }
    }
  >div:nth-child(2),
    >div:nth-child(3)
   {
      color: #666;
      img {
          width: .28rem;
          height: .28rem;
      }
  }
    >div:nth-child(3){
            @include myStyle();
            width: 2rem;;
    }
    .filter{
          @include myStyle();
    }

}
.list {
    width: 7rem;
    margin: auto;
    column-count: 2;
    column-gap: .13rem;
    margin-top: .5rem;
    font-size: .26rem;
    line-height: .4rem;
}
.isShow{
    margin-left: .4rem;
}
</style>